<template>
    <div class="com-container">
        <!-- 显示图表 -->
        <div class="com-chart" ref="hot_ref">
        </div>
        <!-- 左右箭头 -->
        <span class="iconfont icon-left" @click="toLeft" :style="comStyle">&#xe6ef;</span>
        <span class="iconfont icon-right" @click="toRight" :style="comStyle">&#xe6ed;</span>
        <span class="cat-name" :style="comStyle">{{catName}}</span>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { getThemeValue } from '@/utils/theme_utils'
export default {
    data() {
        return {
            chartInstance:null,
            //服务器获取数据
            allData:null,
            currentIndex:0,//当前展示的一级分类数据
            titleFontSize:0
        }
    },
    created(){
        //回调函数的注册
        this.$socket.registerCallBack('hotData',this.getData)
    },
    mounted() {
        this.initChart()
        // this.getData()
        this.$socket.send({
            action:'getData',
            socketType:'hotData',
            chartName:'hotproduct',
            value:''
        })
        //分辨率适配
        window.addEventListener('resize',this.screenAdapter)
        this.screenAdapter()
    },
    destroyed(){
        //取消监听
        window.removeEventListener('resize', this.screenAdapter)
        //回调函数的取消
        this.$socket.unRegisterCallBack("hotData")
    },
    methods: {
         initChart(){
            this.chartInstance = this.$echarts.init(this.$refs.hot_ref,this.theme)
            const initOption = {
                title: {
                    text: '▎热销商品占比',
                    left: 20,
                    top: 20,
                },
                legend:{//图例
                    top:'15%',
                    icon:'circle'
                },
                tooltip:{
                    //提示工具
                    show:true,
                    formatter:(arg)=>{
                    //    console.log(arg);
                       const thirdCategroy  = arg.data.children
                       //计算所有三级分类综合
                       let total = 0
                       thirdCategroy.forEach(item=>{
                           total+= item.value
                       })
                       let retStr = ''
                       thirdCategroy.forEach(item=>{
                            retStr+= `                              
                                ${item.name} : ${parseInt(item.value / total * 100)+ '%'}</br>
                            `
                       })
                       return retStr
                    }
                },
                series:[
                    {
                        type:'pie',//饼图
                        label:{
                            show:false
                        },
                        //高亮状态显示文字
                        emphasis:{
                            label:{
                                show:true
                            },
                            labelLine:{
                                show:false
                            }
                        }
                    }
                ]
            }
            this.chartInstance.setOption(initOption)
         },
         async getData(res){
                // const {data:res} =  await this.$http.get('hotproduct')
                this.allData = res
                console.log(this.allData)
                this.updateChart()
         },
         updateChart(){
            //处理数据
            const legendData = this.allData[this.currentIndex].children.map(item=>{
                    return {
                        name:item.name,                     
                    }
            })
            const seriesData = this.allData[this.currentIndex].children.map(item=>{
                    return {
                        name:item.name,
                        value:item.value,
                        children:item.children
                    }
            })
            const dataOption = {
                legend:{
                    data:legendData
                },
                series:[
                    {
                       data:seriesData
                    }
                ]
            }
            this.chartInstance.setOption(dataOption)
         },
         screenAdapter(){
            this.titleFontSize = this.$refs.hot_ref.offsetWidth / 100 * 3.6
            const adapterOption = {
                    title:{
                        textStyle:{
                            fontSize:this.titleFontSize
                        }
                    },
                    legend:{
                        itemWidth:this.titleFontSize,
                        itemHeight:this.titleFontSize,
                        itemGap:this.titleFontSize /2,                       
                        textStyle:{
                            fontSize:this.titleFontSize /1.3
                        }
                    },
                    series:[
                        {
                            radius:this.titleFontSize * 4.5,
                            center:['50%','60%']
                        }
                    ]
            }
            this.chartInstance.setOption(adapterOption)
            this.chartInstance.resize()

         },
         toLeft(){
            this.currentIndex--
            if(this.currentIndex<0){
                this.currentIndex = this.allData.length - 1
            }
            this.updateChart()
         },
         toRight(){
            this.currentIndex++
            if(this.currentIndex>this.allData.length - 1){
                this.currentIndex = 0
            }
            this.updateChart()
         }
    },
    computed: {
    catName () {
      if (!this.allData) {
        return ''
      } else {
        return this.allData[this.currentIndex].name
      }
    },
    comStyle () {
      return {
        fontSize: this.titleFontSize + 'px',
        color: getThemeValue(this.theme).titleColor
      }
    },
    ...mapState(['theme'])
  },
    watch: {
        theme () {
        console.log('主题切换了')
        this.chartInstance.dispose() // 销毁当前的图表
        this.initChart() // 重新以最新的主题名称初始化图表对象
        this.screenAdapter() // 完成屏幕的适配
        this.updateChart() // 更新图表的展示
        }
  }
}
</script>

<style lang="less" scoped>
    .icon-left{
        position: absolute;
        left: 10%;
        top:50%;
        transform: translateY(-50%);
        color: #fff;
        cursor: pointer;
    }
    .icon-right{
        position: absolute;
        right: 10%;
        top:50%;
        transform: translateY(-50%);
        color: #fff;
        cursor: pointer;
    }
    .cat-name{
        position: absolute;
        left:80%;
        bottom:20px;
        color: #fff;
    }
</style>